<template>
  <div class="order_box">
    <!-- <Loading v-show="LOADING"></Loading> -->
    <nav-com title="确认开通" :showView="showView" @back="backHandler()"></nav-com>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh" style="font-size: 14px">
<!--      <div class="goods-info group_add">-->
<!--        <div class="title title-line">发送信息:</div>-->
<!--        <div class="item goods-info-item">-->
<!--          <div class="label">发送内容:</div>-->
<!--          <div class="input-content">-->
<!--            预售 VIKK v61个月-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="item goods-info-item">-->
<!--          <div class="label">二维码链接地址:</div>-->
<!--          <div class="input-content input-content-teshu">-->
<!--            www.baidu.co-->
<!--            <div class="copybtn">复制</div>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
      <div class="goods-info group_add">
        <div class="title">发送群体:</div>
        <div class="item goods-info-item">
          <div class="label">性别:</div>
          <div class="input-content">
            {{fromshop.sex}}
          </div>
        </div>
        <div class="item goods-info-item">
          <div class="label">地区:</div>
          <div class="input-content">
            {{fromshop.address}}
          </div>
        </div>
        <div class="item goods-info-item">
          <div class="label">年龄:</div>
          <div class="input-content">
            {{fromshop.age1}}岁<div class="end">至</div>{{fromshop.age2}}岁
          </div>
        </div>
        <div class="item goods-info-item">
          <div class="label">级别:</div>
          <div class="input-content">
         {{fromshop.level}}
          </div>
        </div>
      </div>
      <div class="goods-info group_add">
        <div class="item goods-info-item">
          <div class="label">发送人数:</div>
          <div class="input-content">
            {{fromshop.send_num}}人
          </div>
        </div>
        <div class="item goods-info-item">
          <div class="label">订单金额:</div>
          <div class="input-content">
            {{fromshop.pay_money}}元
          </div>
        </div>
      </div>

      <div class="group_add" style="hieght: auto">
        <div class="pay_title">支付方式</div>
        <ul class="pay_list">
          <li @click="paySel(7,'yingxiao')">
            <div class="pay_icon">
              <img src="../../assets/yiPay.png" />
              <p>
                钱包支付
                <span style="font-size: 12px; color: #999">当前余额</span><span style="font-size: 14px; color: #fe4b20">
                    ￥{{ shareUser.price }}</span><span style="
                      background: #06ba03;
                      color: #fff;
                      padding: 0.5vw 1.5vw;
                      margin-left: 2vw;
                      border-radius: 2px;
                    " @click.stop="toRecharge">充值</span>
              </p>
            </div>
            <div class="pay_sel">
              <img v-if="selFlag == 7" :src="seled" />
              <img v-else :src="sel" />
            </div>
          </li>
          <li @click="paySel(20,'yingxiao')">
            <div class="pay_icon">
              <img src="@/assets/index/lingPay.png" />
              <p>零批余额支付</p>
            </div>
            <div class="pay_sel">
              <img v-if="selFlag == 20" :src="seled" />
              <img v-else :src="sel" />
            </div>
          </li>
          <!-- <li @click="paySel(3)">
            <div class="pay_icon">
              <img src="@/assets/pay_juan.png" />
              <p>提货券兑换</p>
            </div>
            <div class="pay_sel">
              <img v-if="selFlag == 3" :src="seled" />
              <img v-else :src="sel" />
            </div>
          </li>
          <li @click="paySel(8)">
            <div class="pay_icon">
              <img src="@/assets/index/daifu.png" />
              <p>找人代付</p>
            </div>
            <div class="pay_sel">
              <img v-if="selFlag == 8" :src="seled" />
              <img v-else :src="sel" />
            </div>
          </li> -->
        </ul>
      </div>
      <div v-if="payStatus" style="
            border-radius: 2.6vw;
            background: #fff;
            margin: 2.6vw;
            padding: 2.6vw;
            line-height: 7vw;
          ">
        <p>温馨提示：</p>
        <p style="">晚上21:00-早上09:00不能使用微信和支付宝支付</p>
        <p style="font-size: 5vw">请您使用提货券购买！</p>
      </div>

      <div style="height: 40vw">&nbsp;</div>
    </van-pull-refresh>
    <div class="card3_bottom" v-if="selFlag != 3">
      <div class="card3_display">
        <van-button @click="buyclick()" loading-text="购买中..." class="card3_btn">立即支付</van-button>
      </div>
    </div>
    <van-popup style="background: #f5f5f5; border-radius: 3.2vw 3.2vw 0px 0px" v-model="show" position="bottom">
      <div class="scroll">
        <div class="list">
          <div class="list_item" @click="choose(item)" v-for="item in arr" :key="item.id">
            <div class="list_item_left">
              <span class="left_unit">¥</span>
              <span class="left_price">{{ parseInt(item.library.money) }}</span>
            </div>
            <div class="list_item_right">
              <div class="right_left">
                <div class="right_left_title">{{ item.library.name }}</div>
                <div class="right_left_time">有效期{{ item.end_time }}</div>
              </div>
              <div class="right_right">
                <img style="width: 5.3vw" v-if="item.id != checkedId" :src="sel" />
                <img style="width: 5.3vw" v-else :src="seled" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="bottom_btn">
        <div class="bottom_btn_left" @click="closed">不使用核销提货券</div>
        <div class="bottom_btn_right" @click="use">确定使用</div>
      </div>
    </van-popup>
    <!-- 支付密码 -->
    <van-popup closeable style="background: #F5F5F5;border-radius: 10px; top: 40%;" v-model="payPassWordShow" @close="closePayPassWordShow"
               position="center">
      <div class="payPassWord">
        <div class="title" style="text-align: center;font-size: 18px;line-height: 25px;">
          {{ payPassWordTitle }}
        </div>
        <div class="center">
          <div v-if="!payPassWordIs" style="font-size: 14px;display: flex;
          max-height: 20vh;
          margin: 7vh 10vw;
          text-align: center;">
            {{ payPassWordCenter }}
          </div>
          <div style="display: flex;flex-direction: column;text-align: center;padding-top: 15px;" v-if="payPassWordIs">
            <div style="font-size: 14px;color: #333333;line-height: 30px;">待付款</div>
            <div style="font-size: 22px;color: #00BA27;line-height: 25px;">{{ details.price }}</div>
            <div style="font-size: 14px;color: #FF3333;min-height: 25px;margin: 10px 0 5px 0;">
              <span>{{payPassWordInfo}}</span>
            </div>
            <div>
              <!-- 密码输入框 -->
              <van-password-input length="4" :value="payPassWord" :focused="showKeyboard"   @focus="showKeyboard = true" />

            </div>
            <div style="font-size: 16px;color: #3362FF;line-height: 15px;" v-if="payPassWordInfo != ''" @click="toSetPayPassword()">忘记密码？</div>
          </div>
        </div>
        <div class="btns" v-if="!payPassWordIs" style="display: flex;justify-content: space-evenly;">
          <div style="width: 35vw;
            padding: 10px 0;
            text-align: center;
            border: 1px solid #D7D7D7;
            border-radius: 5px;
            color: #000000;" @click="payPassWordShow = false">我知道了</div>
          <div   v-if="payPassWordInfo==''" style="width: 35vw;
            padding: 10px 0;
            background: #FE4B20;
            text-align: center;
            border-radius: 5px;
            color: #fff;" @click="toSetPayPassword()">设置支付密码</div>
          <div  v-if="payPassWordInfo!=''"  style="width: 35vw;
            padding: 10px 0;
            background: #FE4B20;
            text-align: center;
            border-radius: 5px;
            color: #fff;" @click="toSetPayPassword()">忘记密码</div>
        </div>
      </div>
    </van-popup>

    <!-- 数字键盘 -->
    <van-number-keyboard v-model="payPassWord"   :maxlength="4" @hide="onBlurEvent" @input="onPayPassWordInput($event,'yingxiao')" :show="showKeyboard"  /> <!-- 数字键盘 -->
    <!-- 支付成功后的弹框 -->
    <van-dialog v-model="showtank" @confirm="handlerShowDialog" @cancel="cancelDialog" show-cancel-button
                confirmButtonText="确认" confirmButtonColor="#FF491F">
      <div style="margin:8vh 4vw 10vw">
        订单支付成功，点击“确认”按钮， 可查看
      </div>
    </van-dialog>
  </div>
</template>
<script>
import sel from "../../assets/sel.png";
import seled from "../../assets/seled.png";
import {
  friendgoodsdetail,
  getAdressManagesAPI2,
  postWxAppPay,
  postAlipay,
  createOrder,
  postAlipay2,
  myCouponLists,
  couponWriteoff,
  moneyAndScroePay,
  getYiPayStatu,
  paySend,
  setPassWd,
  goodsShare,
  conversionUser,
  friendqrcode
} from "@/api/api";
import { codeLists, writeoff } from "../../api/myExaminatonGaper";
import navCom from "@/component/nav";
import Loading from "@/component/loading";
import { Toast } from "vant";
import { PasswordInput, NumberKeyboard } from 'vant';
import payMixin from "@/view/friendShare/mixin/payMoxin";
import goBackEntity from "@/utils/eventBus.js";

export default {
  name: "pay",
  components: {
    navCom,
    Loading,
  },
  mixins: [payMixin],
  data() {
    return {
      id: "",

      payPassWordShow: false,//显示支付密码
      payPassWordConfirm:false,
      payPassWordTitle: "输入支付密码",
      payPassWordCenter: "您还未设置支付密码，请先设置您的支付密码",
      payPassWordInfo:"",
      showKeyboard: false,
      payPassWord: "",
      payPassWordIs:false,

      splitShow: false,
      showView: true,
      details: {},
      selFlag: 0,
      sel: sel,
      seled: seled,
      checkedId: 0,
      show: false,
      checked: false,
      loadingFlag: false,
      addressDetail: null,
      uid: weixin.getUserId(),
      addressId: null,
      itemid: null,
      borderColor: "1px solid #F7541C",
      backgroundColor: "#FFF7F0",
      tab: 1,
      isLoading: false,
      LOADING: false,
      arr: [],
      order_sn: "",
      one_day: 0,
      has_order: false,
      is_sel:0,
      shareData:[],
      showtank: false,
      showSharetu:false,
      img_url:'',
      h5_url:'',
      fromshop:{}
    };
  },

  async mounted() {
    // this.orderInit();
    this.getPayPassWord();
    // this.getgoodsShare();
  },
  async created() {
    this.fromshop = this.$route.params["fromshop"]?JSON.parse(this.$route.params["fromshop"]):{};
    console.log("===========fromshop",this.fromshop)
  },
  methods: {
    handlerShowDialog(){
      this.showtank = false;
      this.$router.push("/yingxiaoTool");
    },
    cancelDialog(){
      this.showtank = false
    },
    copy(content){
      const inputDom = document.createElement('input');
      inputDom.setAttribute('value', content);
      document.body.appendChild(inputDom);
      inputDom.select();
      document.execCommand('copy');
      document.body.removeChild(inputDom);
      Toast("复制成功")
    },
    closetank() {
      this.backHandler()
    },
    togo(type){
      if(type==1){
        window.JS_TROOPS.weixinShare(this.img_url);
      }else if(type==2){
        window.JS_TROOPS.weixinCircleFriends(this.img_url);
      }else if(type==3){
        window.JS_TROOPS.downloadImage(this.img_url);
      }else if(type==4){
        this.copy(this.h5_url)
      }
    },
    toshowShare(){
      // Toast('二维码分享页面展示')
      friendqrcode({
        link:'https://rongyaofront.bigchun.com/#/freeDetails',
        uid:weixin.getUserId(),
        goods_id:this.id
      }).then((res) => {
        this.showtank=false;
        this.showSharetu=true;
        console.log("二维码分享",res.data)
        this.img_url =res.data.data.img_url
        this.h5_url=res.data.data.h5_url
      });
    },
    toPaySuccess(){
      this.$router.push({
        name:'paySuccess',
        params:{price:this.details.price}
      });
    },
    choose(val) {
      this.arr.map((ele) => (ele.check = false));
      val.check = true;
      this.checkedId = val.id;
      this.arr = this.arr;
    },
    closed() {
      this.checkedId = 0;
      this.show = false;
      this.arr = this.arr.map((ele) => ({ ...ele, check: false }));
      this.selFlag = 1;
    },
    async getList() {
      myCouponLists({
        status: 1,
        offset: 1,
        limit: 20,
        goods_id: this.id,
      }).then((res) => {
        console.log("myCouponLists", res);
        if (res.data.code == 1) {
          // const arr = res.data.data.filter(
          //   (ele) => +ele.library.money >= +this.details.price
          // );
          this.arr = res.data.data;
          console.log(this.arr);
          if (this.arr.length > 0 && this.$route.params["fromPath"] == 'exchange') {//兑换券下单
            this.show = true;
            var couponId = this.$route.params["couponId"];
            this.arr.forEach(element => {
              console.log(element);
              console.log(couponId);
              console.log(element.id == couponId);
              if (element.id == couponId) {
                element.check = true;
              }
            });
            this.checkedId = couponId;
          }
        }
      });
    },
    //返回
    backHandler() {
      this.$router.go(-1);
    },
    onRefresh() {
      this.orderInit();
      this.isLoading = false;
    },
    //微信初始化
    orderInit() {
      friendgoodsdetail({ id: this.id }).then((res) => {
        this.details = res.data.data;
        this.one_day = res.data.data.one_day || 0;
        this.getList();
      });
      this.init()
    },
    //获取数据地址
    init() {
      var addressId = this.$wweixin.getItem("addressId");

      getAdressManagesAPI2().then((res) => {
        console.log("getAdressManagesAPI2", res);
        let addressList = res.data.data;
        if (addressList.length > 0) {
          for (const address of addressList) {
            if (address.id == parseInt(addressId)) {
              this.addressDetail = address;
              localStorage.removeItem("addressId");
              return;
            } else if (address.is_default == 1) {
              this.addressDetail = address;
              return;
            }
          }
        } else {
          this.addressDetail = addressList[0];
          return;
        }
      });
    },
    getgoodsShare(){
      goodsShare().then((res) => {
        this.shareData = res.data.data;
      });
    },
    changeStyle(index){
      this.is_sel=index;
    },
    // 创建订单
    creatOrderWeixinAli() {
      const that = this;
      createOrder({
        from: "goods",
        address_id: this.addressDetail.id,
        coupons_id: 0,
        order_type: "goods",
        buy_type: "alone",
        groupon_id: 0,
        one_day: this.one_day,
        goods_list: [
          {
            goods_id: this.details.id,
            goods_num: 1,
            sku_price_id: this.$route.params["fromPath"] == 'shop' ? this.details.sku[0].id : this.details.sku_price[0].id,
            goods_price: this.details.price,
            goods_type: "2",
            activity_type: "",
            dispatch_type: "express",
          },
        ],
      }).then((res) => {
        this.LOADING = false;
        if (res.data.code == 1) {
          that.order_sn = res.data.data.order_sn;
        } else {
          this.LOADING = false;
          this.$dialog
              .alert({
                message: res.data.msg,
              })
              .then((result) => {
                this.$router.push({ name: "orders", params: { typeNum: 0 } });
              })
              .catch((err) => { });
        }
      });
    },
    //支付

    // 现金和中军值支付
    creatOrders(buy_type) {
      moneyAndScroePay({
        pay_type: buy_type,
        goods_id: this.details.id,
        total_price: this.details.price,
        address_id: this.addressDetail.id,
      }).then((res) => {
        this.LOADING = false;
        console.log(res);
        // this.order_sn = res.data.data.order_sn;
        if (res.data.code == 1) {
          Toast("购买成功");
          setTimeout(() => {
            this.backHandler();
          }, 1000);
        } else {
          this.LOADING = false;
          this.$dialog.alert({
            message: res.data.msg,
          });
        }
      });
    },
    toQrCodePay() {
      this.$dialog
          .alert({
            title: "支付方式",
            message:
                "亲，点击确定支付后-->截图保存支付码-->打开微信扫一扫-->识别扫码并支付，完成订单，半小时内有效。",
            confirmButtonText: "确定支付",
            // showCancelButton: true,
            // cancelButtonText: "取消",
          })
          .then(() => {
            this.$router.push({
              name: "qrCodePay",
              params: { order_sn: this.order_sn },
            });
          })
          .catch((err) => { });
    },

    //选择
    buyclick(){
      conversionUser({mobile:weixin.loginMobile()})
          .then((result) => {
            console.log(result);
            if (result.data.code == 1) {
              localStorage.setItem("token5g", result.data.data.userinfo.token);
              this.pay('yingxiao')
            }
          })
          .catch((err) => {});
    }
  },
};
</script>
<style scoped>
/deep/ .van-password-input__security {
  justify-content: space-around;
}

/deep/ .van-password-input__security li {
  max-width: 36px !important;
  max-height: 36px !important;
  background-color: #EFEFEF;
}

/deep/ .van-password-input__info {
  color: #333333;
  font-size: 14px;
}

/deep/ .van-hairline--surround::after {
  border-width: 1px;
  border: 0 solid transparent;
}

/deep/ .van-number-keyboard {
  z-index: 10000;
}
.payPassWord {
  width: 80vw;
  padding: 20px 10px;
}

</style>
<style scoped>
/* 共用 */
p {
  margin: 0;
  padding: 0;
}

html,
body,
#app,
.order_box {
  height: 100%;
  overflow: hidden;
}

.order_box {
  background: #f2f2f2;
  height: auto;
  min-height: 100vh;
}
.group_add {
  width: 91vw;
  padding: 4px 8px;
  margin-top: 2.6vw;
  margin-left: 2.6vw;
  border-radius: 2.6vw;
  background: #fff;
}
.orderSty,.shareSty{
  padding: 10px 9px;
  display: flex;
}
.orderSty .name,.shareSty .name{
  font-size: 14px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #222222;
  line-height: 20px;
}
.orderSty .divSty {
  display: flex;
}
.orderSty .divSty .radiosel{
  font-size: 13px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #222222;
  line-height: 18px;
  display: flex;
  align-items: center;
  margin-right: 10px;
}
.shareSty .divSty{
  font-size: 13px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #47474C;
  line-height: 18px;
  flex:1;
}
.orderSty .divSty .radiosel img{
  width: 18px;
  height: 18px;
  margin-right: 5px;
}
.card3_bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 18.66vw;
  background: #fff;
  height: 18.66vw;
}

.card3_display {
  margin: 3.3vw;
  width: auto;
}

.card3_bottom .card3_btn {
  width: 94.66vw;
  height: 12vw;
  line-height: 12vw;
  font-size: 4vw;
  background: #d62f34;
  border-radius: 6vw;
  text-align: center;
  color: #fff;
}

.pay_add {
  padding-top: 8.4vw;
  display: flex;
}

.pay_add img {
  width: 4.53vw;
  height: 5.86vw;
  padding-left: 34vw;
}

.pay_add p {
  padding-left: 2.6vw;
  font-size: 3.4vw;
  color: #333;
}

.pay_add_success {
  display: flex;
  padding:10px 0;
}

.pay_add_success img {
  width: 4.53vw;
  height: 5.86vw;
  padding-left: 2.6vw;
  padding-top: 8.4vw;
}

.pay_add_success .pay_add_right {
  font-size: 3.733vw;
  margin-left: 2.6vw;
}

/* 详情 */
.pay_title {
  margin-left: 3vw;
  padding-top: 2.6vw;
  padding-bottom: 2.6vw;
  font-size: 4vw;
  border-bottom: 1px solid #E7E7E7;
  font-weight: 550;

}
.pay_product{
  display: flex;
  padding: 10px;
}
.pay_product  .goods-tu {
  width: 64px;
  height: 64px;
  margin-right: 8px;
}
.pay_product .goods-tu img {
  width: 64px;
  height: 64px;
  border-radius: 8px;
}
.pay_product .goods-info{flex:1}
.pay_product .goods-info .name {
  font-size: 13px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #222222;
  line-height: 18px;
  display: flex;
  justify-content: space-between;
}

.pay_product .goods-info .name .t0{
  font-weight: 550;
  /* text-overflow: -o-ellipsis-lastline;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;	 */
}
.pay_product .goods-info .num{
  font-size: 13px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
  line-height: 20px;
}
.pay_product .goods-info .statis{
  font-size: 13px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
  line-height: 20px;
}
.cont_color_title {
  margin-left: 3vw;
  padding-top: 2.6vw;
  font-size: 4vw;
}

.cont_color_list {
  display: flex;
  justify-content: space-around;
  margin: 3vw;
  padding-bottom: 5vw;
}

.cont_color_list li {
  display: flex;
  width: auto;
  border: 1px solid #f6f6f6;
  border-radius: 1.3vw;
}

.cont_color_list li img {
  width: 6.667vw;
  height: 6.667vw;
  margin: 1.3vw;
}

.cont_color_list li p {
  font-size: 3.2vw;
  line-height: 6.667vw;
  margin-top: 1.3vw;
  margin-right: 1.3vw;
}

/* 办理方式 */
.content_border {
  border-top: 1px solid #e1e1e1;
  margin: 2.6vw;
}

.pay_content .content_text li {
  display: flex;
  justify-content: space-between;
}

.pay_content .content_text li p {
  font-size: 3.2vw;
  color: #999;
  height: 6vw;
  line-height: 6vw;
  margin-left: 2.6vw;
}

.pay_content .content_text li span {
  font-size: 4vw;
  color: #d62f34;
  height: 6vw;
  line-height: 6vw;
  margin-right: 2.6vw;
}

/*支付方式*/
.pay_list {
  margin-top: 4vw;
}

.pay_list li {
  display: flex;
  justify-content: space-between;
}

.pay_icon {
  display: flex;
  height: 12vw;
}

.pay_icon img {
  width: 5.3vw;
  height: 5.3vw;
  margin-left: 2.6vw;
}

.pay_icon p {
  padding-left: 2.6vw;
}

.pay_sel img {
  width: 4vw;
  height: 4vw;
  margin-right: 2.6vw;
}

.bottom_btn {
  display: flex;
  /*width: 374px;*/
  height: 16vw;
  text-align: center;
  line-height: 16vw;
  font-size: 4.5vw;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  background: #f86831;
}

.bottom_btn_left {
  width: 50vw;
  background: #c1c1c1;
}

.bottom_btn_right {
  flex: 1;
}

.list {
  width: 93.6vw;
  margin: 0 auto;
  /* padding-top: 8vw; */
}

.list_item {
  background: url("~@/assets/pay_quan_bg.png");
  background-size: cover;
  width: 93.6vw;
  box-sizing: border-box;
  display: flex;
  height: 21vw;
  padding-right: 3.2vw;
  margin-bottom: 4vw;
}

.list_item_left {
  width: 29.3vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

.list_item_right {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /*justify-content: center;!**!*/
}

.right_left {
  padding-left: 3.2vw;
}

.right_left_title {
  font-size: 4.53vw;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #333333;
}

.right_left_time {
  margin-top: 3.2vw;
  font-size: 3.2vw;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #a1a1a1;
}

.left_unit {
  color: #fff;
  font-size: 4.5vw;
}

.left_price {
  color: #fff;
  font-size: 6.4vw;
}

.scroll {
  max-height: 300px;
  overflow-x: hidden;
}

.van-popup--bottom {
  padding-top: 20px !important;
}

.splitPopup {
  width: 327px;
  height: 230px;
  padding: 15px;
  background-image: url(../../assets/cdbg.png);
  background-repeat: round;
  display: flex;
  flex-direction: column;
  /* align-items: center; */
}

.tips {
  width: 233px;
  height: 44px;
  font-size: 13px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 600;
  color: #8b2100;
  line-height: 22px;
  padding-left: 5px;
}

.splitTypes {
  display: flex;
  margin-top: 5vh;
  justify-content: space-around;
  align-items: center;
  height: 200px;
}

.splitTypes .item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.splitTypes .item .title {
  width: 39px;
  height: 18px;
  font-size: 13px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #aa6c54;
  line-height: 18px;
}

.splitTypes .item .money {
  height: 60px;
  font-size: 27px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #333333;
  line-height: 60px;
}

.splitTypes .item .btn {
  width: 99px;
  height: 29px;
  line-height: 29px;
  background: linear-gradient(180deg, #e48e5c 0%, #c4552f 100%);
  border-radius: 15px;
  text-align: center;
  color: white;
}

.splitTypes .item .zfzbtn {
  width: 99px;
  height: 29px;
  border-radius: 15px;
  border: 1px solid #d26e43;
  color: #d26e43;
  line-height: 29px;
}

.splitTypes .item .yzfbtn {
  width: 99px;
  height: 29px;
  border-radius: 15px;
  border: 1px solid #d1d2d5;
  color: #666666;
  line-height: 29px;
}
.vip-tankbg {
  background: rgba(0, 0, 0, 0.75);
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}
.vip-tankbg .vip-tank {
  background: #ffffff;
  background-size: 100% 186px;
  margin: 50% 30px 0;
  height: 186px;
  padding: 10px 20px;
  text-align: center;
  border-radius: 6px;
  position: relative;
}
.vip-tankbg .vip-tank .t0 {
  width: 80px;
  height: 80px;
  margin: 10px auto 0;
}
.vip-tankbg .vip-tank .t0  img{
  width: 80px;
  height: 80px;
}
.vip-tankbg .vip-tank .t1 {
  font-size: 15px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #222222;
  line-height: 25px;
}
.vip-tankbg .vip-tank .t2 {
  font-size: 13px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #666666;
  line-height: 18px;
}
.vip-tankbg .vip-tank .t3{
  line-height: 40px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
  line-height: 36px;
}
.t3-bg{
  background: #d62f34;
  color: #ffffff!important;
  border-radius: 6px;
  position: absolute;
  bottom: 20px;
  width: 140px;
  left:calc(50% - 70px);
}
.vip-tankbg .tank-close {
  margin: 0 auto;
  width: 30px;
  height: 30px;
}
.vip-tankbg .tank-close img {
  width: 30px;
  height: 30px;
  margin-top: 20px;
}
.shareboxbg{
  background: rgba(0, 0, 0, 0.75);
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}
.sharebox .shareTU{
  background: #ffffff;
  height: 325px;
  width: 250px;
  padding: 10px;
  border-radius: 12px;
  z-index: 10;
  position: absolute;
  bottom: 170px;
  left: calc(50% - 135px);
}
.sharebox .shareTU .tu img{
  width: 250px;
  max-height: 130px;
}
.sharebox .shareTU  .price{
  margin: 10px 0;
}
.sharebox .shareTU  .price .t00{
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #FA2C1E;
  line-height: 25px;
  margin-right: 10px;

}
.sharebox .shareTU  .price .t01{
  font-size: 15px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #666666;
  line-height: 21px;
  text-decoration: line-through;

}
.sharebox .shareTU .name{
  font-size: 15px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #333333;
  line-height: 21px;
}
.sharebox .shareTU .ewm {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.sharebox .shareTU .ewm img{
  width: 77px;
  margin-bottom: 10px;
}
.sharebox .shareTU .ewm span{
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
  line-height: 17px;
  display: block;
}
.shareStyList{
  clear: both;
  height: 150px;
  background: #F5F5F5;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  text-align: center;
  padding-top: 50px;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9;
}
.shareStyList .t0{
  font-size: 13px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
  line-height: 18px;
}
.styList{
  display: flex;
  justify-content: space-evenly;
  padding: 10px 0 15px;
}
.styList .item{

}
.styList .item img{
  width: 50px;

}
.styList .item span{
  font-size: 11px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
  line-height: 16px;
  display: block;
}
.shareStyList .cancle{
  background: #FFFFFF;
  line-height: 43px;
}


.goods-info {
  margin-top: 10px;
  background-color: #fff;
}
.goods-info .title {
  line-height: 50px;
  font-size: 18px;
  font-weight: 700;
}
.goods-info .title-line {
  border-bottom: 1px solid #eee;
}
.goods-info .item .scroll_x {
  width: 92vw;
  overflow-x: scroll;
  display: flex;
  flex-wrap: nowrap;

}
.shop_item{
  position: relative;
  margin-right: 10px;
}
.goods-info .item .scroll_x .ischoose{
  position: absolute;
  top: 0px;
  right:5px;
  width: 20px;
}
.goods-info .item .scroll_x .shopimg{
  width: 45vw;
  height: 45vw;
}
.goods-info .item .scroll_x .titleshop{
  font-size: 15px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #222222;
  line-height: 21px;
}
.goods-info-item{
  display: flex;
  align-items: center;
}
.item .label {
  line-height: 40px;
  color: #949494;
  margin-right: 5px;
}
.input-content {
  display: flex;
  align-items: center;
}
.input-content-teshu{
  width: 68%;
  justify-content: space-between;
}
.copybtn{
  background: #C4C5C4;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  padding: 2px 6px;
}
.input {
  border-radius: 5px;
}
.end {
  width: 25px;
  height: 100%;
  text-align: center;
  font-size: 14px;
}

</style>

